<template>
	<view class="client_manager">
		<view class="search">
			<i-search @focus="showHistory = true" @blur="showHistory = false" @clear="searchChange" :width="storeInfo.merType != '1'?'480rpx':'580rpx'"
				@change="searchChange" v-model="formData.keyword" margin="none" bgColor="#fff"
				:placeholder="storeInfo.merType === '1'?'姓名/手机号搜索':'车牌号/姓名/手机号搜索'"></i-search>
			<view class="search_r" @click="scan_open" v-if="storeInfo.merType != '1'">
				<image src="../../static/images/ewm_khicon.png" mode=""></image>
			</view>
		</view>
		<i-historySearch type="historyCustom" @change="historySearchs"
			v-if="showHistory && getStorage('historyCustom')"></i-historySearch>
		<view class="select_list">
			<text class="select_item" :class="{active: sortType === item.id}" v-for="(item,index) in selectList"
				@click="select(item)">{{item.title}}</text>
		</view>
		<i-scrollList @more="more" height="calc(100vh - 142px)" :total="pageData.total"
			:pageTotal="pageData.list.length">
			<i-clientItem type='1' v-for="item in pageData.list" :key="item.userId" :data="item"
				@click="toDetail"></i-clientItem>
			<view v-if="skeleton" v-for="(item,index) in 8" :key="item" style="margin-top: 10px;">
				<i-skeleton iconSize="64rpx" radius="64rpx" :rowsW="['80%', '60%']" :rowsH="['30rpx', '30rpx']"
					size="48rpx" height="154rpx" :rows="2"></i-skeleton>
			</view>
		</i-scrollList>
		<view class="flex_bottom" @click="navTo('/pages/business/addCustom', 'navigateTo')" v-if="storeInfo.merType!='1'">
			<image src="../../static/images/add@2x.png"></image>
			添加客户
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive,
		ref,
		computed
	} from "vue";
	import {
		navTo,
		getAppQX,
		setStorage,
		getStorage
	} from '../../utils/common'
	import {
		getStoreCustomerList
	} from '../../api/store'
	import useStore from "../../stores/index";
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	const store = useStore()
	const storeInfo = computed(() => {
		return store.storeInfo
	})
	const skeleton = ref(true)
	const showHistory = ref(false)
	const activeName = ref('添加时间')
	const sortType = ref(1)
	const selectList = storeInfo.value.merType === '1' ? 
	ref([{title: '添加时间',id: 1,},{title: '金额',id: 2,},{title: '订单量',id: 3,}]):
	ref([{title: '添加时间',id: 1,},{title: '金额',id: 2,},{title: '订单量',id: 3,},
		{title: '开单',id: 4,},{title: '开单量',id: 5,}])
	const formData = reactive({
		keyword: '',
		tyjPageNum: 1,
		tyjPageSize: 15

	})
	const pageData = reactive({
		list: [],
		total: 0,
	})

	onLoad((option) => {
		if (option && option.vno) {
			formData.keyword = option.vno
		}
	})

	const more = () => {
		formData.tyjPageNum++
		customerList()
	}

	const customerList = async () => {
		const data = await getStoreCustomerList({
			"keyword": formData.keyword,
			"sortType": sortType.value,
			"tyjPageNum": formData.tyjPageNum,
			"tyjPageSize": formData.tyjPageSize,
		})
		skeleton.value = false
		pageData.list = pageData.list.concat(data.rows)
		pageData.total = data.total
	}

	const historySearchs = (e : string) => {
		formData.keyword = e
		clearForm()
		customerList()
	}

	const searchChange = () => {
		showHistory.value = false
		clearForm()
		customerList()
		if (!formData.keyword) {
			return
		}
		const historyCustom = getStorage('historyCustom')
		if (!historyCustom) {
			setStorage('historyCustom', [formData.keyword])
			return
		} else {
			historyCustom.unshift(formData.keyword)
			const set = (new Set(historyCustom))
			setStorage('historyCustom', [...set].slice(0, 6))
		}
	}

	const clearForm = () => {
		pageData.list = []
		pageData.total = 0
		formData.tyjPageNum = 1
		skeleton.value = true
	}

	const toDetail = (data : { userId : string, id : string }) => {
		navTo(`/pages/views/client_detail?userId=${data.userId || ''}&id=${data.id || ''}`, 'navigateTo')
	}

	const select = (i : { title : string, id : number }) => {
		activeName.value = i.title
		sortType.value = i.id
		clearForm()
		customerList()
	}

	const scan_open = () => {
		// #ifdef APP-PLUS
		navTo('/pages/views/scanCar', 'navigateTo')
		// #endif
		// #ifdef MP-WEIXIN
		if (!getAppQX('cameraAuthorized')) {
			return
		}
		navTo('/pages/views/wxScan_car', 'navigateTo')
		// #endif
		uni.$on('changeVno', (data) => {
			formData.keyword = data.vno
			uni.$off('changeVno')
		})
	}

	onShow(() => {
		clearForm()
		customerList()
	})
</script>

<style lang="scss" scoped>
	.client_manager {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: $backColor;

		.search {
			width: calc(100% - 64rpx);
			margin: 0 auto;
			@include flexRS;
			height: 44px;

			.search_r {
				width: 72rpx;
				height: 72rpx;

				image {
					width: 72rpx;
					height: 72rpx;
				}
			}
		}

		.select_time {
			@include dfont;
			@include flexR;
			margin-left: 32rpx;
			@include overflow;
			@include warp;
			height: 44px;
			border-radius: 32rpx;

			.image {
				width: 20rpx;
				height: 12rpx;
				margin-left: 8rpx;
				@include flexRC;

				image {
					width: 20rpx;
					height: 12rpx;
				}
			}

		}

		.card_body {
			@include flexRS;

			.card_left {
				@include flexR;

				.image {
					width: 64rpx;
					height: 64rpx;
					border-radius: 64rpx;
					margin-right: 24rpx;

					image {
						width: 64rpx;
						height: 64rpx;
						border-radius: 64rpx;
					}
				}

				.item_name {
					@include flexC;
					@include dfont(26rpx);

					.title {
						@include titlefont(28rpx);
						margin-bottom: 8rpx;
					}

					.item_names {
						@include flexR;

						text {
							@include dWeight;
							margin-right: 20rpx;
							color: #5C6D80;
						}
					}

				}
			}

		}

	}

	.select_list {
		width: calc(100% - 64rpx);
		margin: 0 auto;
		@include flexRS;
		height: 88rpx;

		.select_item {
			@include contentfont(26rpx);
		}

		.active {
			color: $title-color !important;
			font-weight: bold !important;
		}
	}

	.car_number {
		height: 900rpx;
		width: calc(100% - 64rpx);
		margin: 0 auto;

		.car_title {
			@include flexRS;
			padding-bottom: 48rpx;

			.image {
				width: 48rpx;
				height: 48rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}
</style>